<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Main Page</title>

    <!--引入echarts.js这个文件-->
    <script src="js/echarts.js"></script>
    <!--导入jquery-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!--导入数据-->
    <script src="js/dataSeries.js"></script>

    <style type="text/css">
        #menu {
            background-color: #0F2A64;
            height: 40px;
        }
        #menu ul{
            float:left;
            margin:0;
            padding:0 0 0 20px;
            list-style:none;
        }
        #menu ul li{
            background-color:#0F2A64;
            color: #ccc;
            padding: 10px 0 0 0;
            width: 160px;
            height:30px;
            float:left;
            text-align:center;
        }
        #menu ul li:hover{
            color: #176AA3;
        }
        #left{
            background-color: #0E1B3E;
            float: left;
            width: 25%;
            height: 600px;
        }
        #infrastructure_province{
            border: 1px solid rgba(25,186,139,.17);
            padding:2px;
            background: rgba(255,255,255,.04);
            background-size: 100% auto;
            /*margin: 5px;*/
            height: 250px;
        }
        #GDP_lines{
            border: 1px solid rgba(25,186,139,.17);
            padding:2px;
            background: rgba(255,255,255,.04);
            background-size: 100% auto;
            /*position: relative;*/
            /*z-index: 10;*/
            /*margin: 5px;*/
            /*border: 2px #a00;*/
            height: 250px;
            /*background-color: #0E1B3E;*/
        }
        #main{
            /*background-color:lightseagreen;*/
            background-color: #0E1B3E;
            float: left;
            width: 50%;
            height: 600px;
        }
        #chart{
            float: right;
            width: 25%;
            height: 600px;
            /*background-color: forestgreen;*/
        }
        #population{
            border: 1px solid rgba(25,186,139,.17);
            padding:2px;
            background: rgba(255,255,255,.04);
            background-size: 100% auto;
            margin: 5px 5px 5px 5px;
            height: 190px;
        }
        #migrate{
            border: 1px solid rgba(25,186,139,.17);
            padding:2px;
            background: rgba(255,255,255,.04);
            background-size: 100% auto;
            margin: 5px 5px 5px 5px;
            height: 190px;
        }
        #GDP{
            border: 1px solid rgba(25,186,139,.17);
            padding:2px;
            background: rgba(255,255,255,.04);
            background-size: 100% auto;
            margin: 5px 5px 5px 5px;
            height: 190px;
        }
        body{
            background-color: #0E1B3E;
        }
        .margin_bottom_20px{
            /*height: 5px;*/
            margin: 20px;
            /*border: 2px #a00;*/
            /*background-color: white;*/
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li onclick="MyFunction1()">迁徙图</li>
            <li onclick="MyFunction2()">夜光遥感</li>
      </ul>
    </div>
    <div id="left">
        <div class="margin_bottom_20px"></div>
        <div id="infrastructure_province"></div>
        <div class="margin_bottom_20px"></div>
        <div class="margin_bottom_20px"></div>
        <div id="GDP_lines"></div>
    </div>
    <div id="main"></div>
    <div id="chart">
        <div id="migrate"></div>
        <div id="population"></div>
        <div id="GDP"></div>
    </div>

    <script>
        var infrastructure_province=echarts.init(document.getElementById("infrastructure_province"));
        var GDP_lines=echarts.init(document.getElementById("GDP_lines"));
        var mychart = echarts.init(document.getElementById("main"));
        var population=echarts.init(document.getElementById("population"));
        var migrate=echarts.init(document.getElementById("migrate"));
        var GDP=echarts.init(document.getElementById("GDP"));


        function MyFunction1(){
        $(document).ready(function () {
        var flag = 0;
        //获取json数据。
        $.get('json/geoCoordMap.json').done(function (Map) {
        var geoCoordMap = Map;
        $.get('json/china.json').done(function (map_china) {
        echarts.registerMap('china',map_china);
        //初始化相关图表
        initChart_infrastructure_province('江苏省');
        initChart_GDP_lines('江苏省');

        function convertData(data,fromCity) {
            var res=[];

            for (let i=0; i<data.length;i++){
                res.push({
                    fromName:fromCity,
                    toName:data[i].name,
                    coords:[geoCoordMap[fromCity],geoCoordMap[data[i].name]]
                });
            }
            return res;
        }
        // 配置项和配置数据
        function initEchart(data,city_name){
            echarts.init(document.getElementById('main')).dispose();
            var mychart = echarts.init(document.getElementById("main"),'westeros');

            let initData=convertData(data,city_name);

            let series = [{
                type: 'lines',
                zlevel:1,

                effect: {
                        show: true,
                        period: 0.7,
                        trailLength: 2,
                        color: '#4cfcff',
                        // symbol:'arrow',
                        symbolSize: 1.5

                    },
                lineStyle: {
                    normal: {
                        color: '#1d6b9d',
                        width: 1.5,
                        curveness: 0.22,
                        opacity:0.02
                    }
                },

                tooltip:{
                    show:false
                },

                data:initData

            }];

            let option = {
                backgroundColor:{
                    type:'radial',
                    x:0.5,
                    y:0.5,
                    r:0.5,
                    colorStops: [{
                        offset: 0, color: '#094392' // 0% 处的颜色
                    },{
                        offset: 1, color: '#0D1C3D' // 100% 处的颜色
                    }],
                },
                title: {
                    text: '中国主要省份迁出状况',
                    top: 20,
                    left:'center',
                    textStyle:{
                        color:'#ccc',
                        fontWeight: 'lighter',
                        fontSize:20
                    }
                },
                tooltip: {},
                geo: {
                    // 定义地图的类型
                    map: 'china',
                    roam:false,

                    zoom: 1.3,
                    center:[103.617733, 37.792818],

                    label:{
                        show:true,
                        color: '#ccc',
                        fontSize:7,
                    },
                    itemStyle:
                    {
                        areaColor:'#1C1E20',
                        borderWidth: 1,
                        borderColor:'#3561AE',
                        opacity: 0.5,
                    },
                    emphasis:{
                        itemStyle:{areaColor:'#89d4dc',},
                        label:{
                            show:true,
                            color:'#ccc',
                            fontSize:12
                        }
                    },
                    regions:[
                        {
                        name:'内蒙古自治区',
                        label:{
                            formatter: '内蒙古',
                        }
                    },{
                        name:'宁夏回族自治区',
                        label: {formatter: '宁夏'},
                    },{
                        name:'新疆维吾尔自治区',
                        label: {formatter: '新疆'},
                    },{
                        name:'西藏自治区',
                        label: {formatter: '西藏'},
                    },{
                        name:'广西壮族自治区',
                        label: {formatter: '广西'},
                    }]
                },

                series:series
            };
            mychart.setOption(option,true);
            mychart.on('mouseover',function (params) {
                console.log(params.name);
               switch (params.name) {
                   case '江苏省':
                       if (flag===0){
                           break;
                       }
                       flag=0;

                       mychart.clear;
                       initChart_infrastructure_province('江苏省');
                       initChart_GDP_lines('江苏省');
                       initEchart(dataSerise['jiangsu_migrate'],'南京市');
                       break;
                   case '广东省':
                       if(flag===1){
                           break;
                       }
                       flag = 1;
                       mychart.clear;

                       initChart_infrastructure_province(params.name);
                       initChart_GDP_lines(params.name);
                       initEchart(dataSerise['guangdong_migrate'],'广州市');
                       break;
                   case '北京市':
                        if(flag===2)
                            break;
                        flag = 2;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['beijing_migrate'],'北京市');
                        break;
                   case '河北省':
                        if (flag===3)
                            break;
                        flag = 3;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['hebei_migrate'],'石家庄市');
                        break;
                   case '上海市':
                        if (flag===4)
                            break;
                        flag = 4;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['shanghai_migrate'],'上海市');
                        break;
                   case '安徽省':
                        if (flag===5)
                            break;
                        flag = 5;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['anhui_migrate'],'合肥市');
                        break;
                   case '福建省':
                        if (flag===6)
                            break;
                        flag = 6;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['fujian_migrate'],'福州市');
                        break;
                   case '甘肃省':
                        if (flag===7)
                            break;
                        flag = 7;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['gansu_migrate'],'兰州市');
                        break;
                   case '广西壮族自治区':
                        if (flag===8)
                            break;
                        flag = 8;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['guangxi_migrate'],'南宁市');
                        break;
                   case '贵州省':
                        if (flag===9)
                            break;
                        flag = 9;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['guizhou_migrate'],'贵阳市');
                        break;
                   case '海南省':
                        if (flag===9)
                            break;
                        flag = 9;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['hainan_migrate'],'海口市');
                        break;
                   case '河南省':
                        if (flag===9)
                            break;
                        flag = 9;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['henan_migrate'],'郑州市');
                        break;
                   case '黑龙江省':
                        if (flag===10)
                            break;
                        flag = 10;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['heilongjiang_migrate'],'哈尔滨市');
                        break;
                   case '湖北省':
                        if (flag===10)
                            break;
                        flag = 10;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['hubei_migrate'],'武汉市');
                        break;
                   case '湖南省':
                        if (flag===11)
                            break;
                        flag = 11;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['hunan_migrate'],'长沙市');
                        break;
                   case '吉林省':
                        if (flag===12)
                            break;
                        flag = 12;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['jilin_migrate'],'长春市');
                        break;
                   case '江西省':
                        if (flag===13)
                            break;
                        flag = 13;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['jiangxi_migrate'],'南昌市');
                        break;
                   case '辽宁省':
                        if (flag===14)
                            break;
                        flag = 14;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['liaoning_migrate'],'沈阳市');
                        break;
                   case '内蒙古自治区':
                        if (flag===15)
                            break;
                        flag = 15;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['neimenggu_migrate'],'呼和浩特市');
                        break;
                   case '宁夏回族自治区':
                        if (flag===16)
                            break;
                        flag = 16;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['ningxia_migrate'],'银川市');
                        break;
                   case '青海省':
                        if (flag===17)
                            break;
                        flag = 17;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['qinghai_migrate'],'西宁市');
                        break;
                   case '山东省':
                        if (flag===10)
                            break;
                        flag = 10;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['shandong_migrate'],'济南市');
                        break;
                   case '山西省':
                        if (flag===18)
                            break;
                        flag = 18;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['shan1xi_migrate'],'太原市');
                        break;
                   case '陕西省':
                        if (flag===19)
                            break;
                        flag = 19;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['shan3xi_migrate'],'西安市');
                        break;
                   case '四川省':
                        if (flag===20)
                            break;
                        flag = 20;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['sichuan_migrate'],'成都市');
                        break;
                   case '天津市':
                        if (flag===21)
                            break;
                        flag = 21;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['tianjin_migrate'],'天津市');
                        break;
                   case '新疆维吾尔自治区':
                        if (flag===23)
                            break;
                        flag = 23;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['xinjiang_migrate'],'乌鲁木齐市');
                        break;
                   case '西藏自治区':
                        if (flag===22)
                            break;
                        flag = 22;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['xizang_migrate'],'拉萨市');
                        break;
                   case '云南省':
                        if (flag===24)
                            break;
                        flag = 24;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['yunnan_migrate'],'昆明市');
                        break;
                   case '浙江省':
                        if (flag===25)
                            break;
                        flag = 25;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['zhejiang_migrate'],'杭州市');
                        break;
                   case '重庆市':
                        if (flag===25)
                            break;
                        flag = 25;

                        mychart.clear;
                        initChart_infrastructure_province(params.name);
                        initChart_GDP_lines(params.name);
                        initEchart(dataSerise['chongqing_migrate'],'重庆市');
                        break;
               }
            });
            mychart.on('click',function (params) {
                $.get('json/map/province/'+province_code[params.name]+'.json',function (geoJson) {
                    initChart_Province(geoJson,params.name)
                })
            });
                // mychart.setOption(option)
        }

        function initChart_Province(geojson,name) {
            echarts.init(document.getElementById('main')).dispose();
            var mychart = echarts.init(document.getElementById("main"));
            echarts.registerMap('Map',geojson);

            let dataset = dataSerise['population_migrate'][name];

            let series = [{
                name:'迁入人口',
                type:'scatter',
                itemStyle:{
                    color:'#F3E72C',
                    opacity:0.5,
                },
                symbolSize: function (params) {
                    temp = params[2]/10000;
                    var temp;
                    if (temp < 5)
                        temp = 5;
                    else if (temp > 100)
                        temp = 100;
                    return temp;
                },
                coordinateSystem:'geo',
                data:dataset
            }];

            let option = {
                // backgroundColor:'#1b1b1b',
                title: {
                    text: name+'迁入人口',
                    subtext:'点击任意区域回到\"全国\"视图',
                    left:'center',
                    top:20,
                    textStyle:{
                        color:'#ccc',
                        fontWeight: 'lighter',
                        fontSize:20
                    }
                },
                tooltip: {
                    formatter:function (params) {
                        return '迁出人口：<br>'+params.value[2]
                    }
                },
                backgroundColor:{
                    type:'radial',
                    x:0.5,
                    y:0.5,
                    r:0.5,
                    colorStops: [{
                        offset: 0, color: '#094392' // 0% 处的颜色
                    },{
                        offset: 1, color: '#0D1C3D' // 100% 处的颜色
                    }],
                },
                geo: {
                    // 定义地图的类型
                    map: 'Map',
                    roam:false,
                    itemStyle:
                    {
                        areaColor:'#3b3d41',
                        borderWidth: 1,
                        borderColor:'#3561AE',
                        opacity: 0.5,
                    },
                    emphasis:{
                        itemStyle:{areaColor:'#89d4dc',},
                        label:{
                            show:true,
                            color:'#ccc',
                            fontSize:12
                        }
                    },
                },

                series:series
            };
            mychart.setOption(option,true);
            mychart.on('click',function () {
                initEchart(dataSerise['jiangsu_migrate'],'南京市');
            })
        }

        initEchart(dataSerise['jiangsu_migrate'],'南京市');
        //getJson套娃
        })
        });
    //$(document).ready(function () {
    });
    }
        function MyFunction2(){
        $(document).ready(function () {
        // 进行echarts的初始化，以及定位到画布
        echarts.init(document.getElementById('main')).dispose();
        var mychart = echarts.init(document.getElementById("main"),'westeros');
        // 数据异步加载

            init_increase();
            init_light();

        $.get('json/china.json').done(function (Map) {

            echarts.registerMap('china',Map);
            initChart();
            });
        // 配置项和配置数据
        function initChart(){
        var option = {

            //标题及格式
            title: {
                text: '夜光遥感',
                left:'center',
                textStyle:{
                        color:'#ccc',
                        fontSize:20
                }
            },
            //时间轴
            timeline:{
                symbol:'pin',
                axisType:'category',
                left:'10%',
                right:'10%',
                data:['2000','2005','2010','2015','2020'],
                autoPlay:true,
                playInterval:'1000',
            },

            backgroundColor:{
                    type:'radial',
                    x:0.5,
                    y:0.5,
                    r:0.5,
                    colorStops: [{
                        offset: 0, color: '#094392' // 0% 处的颜色
                    },{
                        offset: 1, color: '#0D1C3D' // 100% 处的颜色
                    }],
                },
            //数据提示信息
            tooltip: {},
            //图例
            visualMap:{
            type:'continuous',
            max:200,
            show:false,
            inRange:{
               color:[
                  '#000','#eac736','#ff191e'
               ],
                opacity:[
                    0,0.5,1
                ]
            }
            },
            //地图有关定义
            geo: {
                    // 定义地图的类型
                    map: 'china',
                    roam:false,

                    zoom: 1.3,
                    center:[103.617733, 37.792818],

                    label:{
                        show:true,
                        color: '#ccc',
                        fontSize:7,
                    },
                    itemStyle:
                    {
                        areaColor:'#1C1E20',
                        borderWidth: 1,
                        borderColor:'#3561AE',
                        opacity: 0.5,
                    },
                    emphasis:{
                        itemStyle:{areaColor:'#89d4dc',},
                        label:{
                            show:true,
                            color:'#ccc',
                            fontSize:12
                        }
                    },
                    regions:[
                        {
                        name:'内蒙古自治区',
                        label:{
                            formatter: '内蒙古',
                        }
                    },{
                        name:'宁夏回族自治区',
                        label: {formatter: '宁夏'},
                    },{
                        name:'新疆维吾尔自治区',
                        label: {formatter: '新疆'},
                    },{
                        name:'西藏自治区',
                        label: {formatter: '西藏'},
                    },{
                        name:'广西壮族自治区',
                        label: {formatter: '广西'},
                    }]
                },
            series:{
                name:'data',
                type: 'heatmap',
                pointSize:5,
                blurSize:10,
                coordinateSystem:'geo',
            },
            //数据
            options:[
                {series:[
                {data:dataSerise['2000']}]},
                {series:[{
                data:dataSerise['2005']}]},
                {series:[{
                data:dataSerise['2010']}]},
                {series:[{
                data:dataSerise['2015']}]},
                {series:[{
                data:dataSerise['2020']}]},
            ]

        };
        mychart.setOption(option,true)
        }

    });
    }
        function initChart_population() {
            let option={
                backgroundColor:'#0D1C3D',
                title:{
                    text:'中国各省人口密度',
                    left:'center',
                    textStyle:{
                        color:'#CCC',
                        fontSize:10
                    }
                },
                grid:{
                    left: '15%',
                    right:'5%',
                    top:'10%',
                    bottom:'10%',
                },
                tooltip:{
                    show:true,
                    formatter:'{b}人口密度:{c}',
                },
                xAxis:{
                    type:'category',
                    splitLine:{show:false},
                    data:dataSerise['category_population'],
                },
                yAxis:{type: 'value',splitLine:{show:true,lineStyle:{opacity:0.3}},},
                series:[{
                    type:'bar',
                    itemStyle:{color:'#2681d1' },
                    emphasis:{itemStyle:{color:'#247ba8'}},

                    data:dataSerise['value_population']
                }]
            };
            population.setOption(option,true)
        }
        function initChart_infrastructure(){
        var flag=0;
        let option={
            backgroundColor:'#0D1C3D',
            dataset:{source:dataSerise['infrastructure']},
            title:{
                text:'中国各省基础设施状况',
                left:'center',
                textStyle:{
                    color:'#CCC',
                    fontSize:10
                }
            },
               grid:{
                   left: '9%',
                   right:'7%',
                   top:'10%',
                   bottom:'10%',
               },
                tooltip:{
                    show:true,
                    trigger:'axis',
                    // formatter:function (params) {
                    //
                    // },
                },
                xAxis:{
                    type:'category',
                    splitLine:{show:false},
                },
                yAxis:[
                    {type: 'value',splitLine:{show:true,lineStyle:{opacity:0.3}},},
                    {type: 'value'}
                ],
                series:[
                    {
                    type:'bar',
                    itemStyle:{color:'#407fff'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                },
                    {
                    type:'bar',
                    itemStyle:{color:'#a681e6'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                },
                    {
                    type:'bar',
                    itemStyle:{color:'#57858d'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                },
                    {
                    type:'bar',
                    yAxisIndex: 1,
                    itemStyle:{color:'#f29961'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                },
                ]
            };
            infrastructure.setOption(option,true);
            infrastructure.on('click',function (params) {
                console.log(params);
                if(params.name === '全国'){
                    initChart_infrastructure()
                }
                else {
                    if(flag)
                        return;
                    option.title={
                        text:params.seriesName,
                        subtext:'点击\"全国\"回到原视图',
                        left:'center',
                        textStyle:{
                       color:'#CCC',
                       fontSize:10
                   }
                    };

                    option.series=[{
                    type:'bar',
                    itemStyle:{color:'#57858d'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                    encode:{
                        x:'地区',
                        y:params.seriesName
                    }
                    }];
                }
                console.log(option);
                infrastructure.setOption(option,true);
                flag=1
            })
        }
        function initChart_infrastructure_province(province_name){
        i = dataSerise['province_index'].indexOf(province_name);
        let dataset = [];
        dataset.push(dataSerise['infrastructure'][0]);
        dataset.push(dataSerise['infrastructure'][1]);
        dataset.push(dataSerise['infrastructure'][i+2]);

        let option={
            backgroundColor:'#0D1C3D',
            dataset:{source:dataset},
            title:{
                text:province_name+'基础设施状况',
                left:'center',
                textStyle:{
                    color:'#CCC',
                    fontSize:10
                }
            },
               grid:{
                   left: '7%',
                   right:'15%',
                   top:'15%',
                   bottom:'12%',
               },
                tooltip:{
                    show:true,
                    trigger:'axis',
                },
                xAxis:{
                    type:'category',
                    splitLine:{show:false},
                    axisLabel:{
                        interval:0,
                        rotate:-15,
                        textStyle:{
                            fontSize:7
                        }
                    },
                },
                yAxis:[
                    {type: 'value',splitLine:{show:true,lineStyle:{opacity:0.3}},},
                    {type: 'value'}
                ],
                series:[
                    {
                    type:'bar',
                    seriesLayoutBy: 'row',
                    itemStyle:{color:'#aa98cc'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                },
                    {
                    type:'bar',
                    seriesLayoutBy: 'row',
                    itemStyle:{color:'#3a8acd'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                },
                ]
            };
        infrastructure_province.setOption(option,true);

        }
        function initChart_GDP(){
            let option={
                backgroundColor:'#0D1C3D',
                dataset:{source:dataSerise['GDP']},
                title:{
                    text:'中国各省2020年GDP',
                    left:'center',
                    textStyle:{
                        color:'#CCC',
                        fontSize:10
                    }
                },
                grid:{
                    left: '2%',
                    right:'5%',
                    top:'10%',
                    bottom:'10%',
                },
                tooltip:{
                    show:true,
                    trigger:'axis',
                },
                xAxis:{
                    type:'category',
                    splitLine:{show:false},
                },
                yAxis:[
                    {
                        type: 'value',
                        splitLine:{show:true,lineStyle:{opacity:0.3}},
                    },
                    {type: 'value'}
                ],
                series:[{
                    type:'bar',
                    itemStyle:{color:'#57858d'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                }]
            };
            GDP.setOption(option,true);
        }
        function initChart_GDP_lines(province_name){
         i = dataSerise['province_index'].indexOf(province_name);
        let dataset = [];
        dataset.push(dataSerise['GDP_lines'][0]);
        dataset.push(dataSerise['GDP_lines'][i+1]);
        dataset.push(dataSerise['GDP_lines_person'][i+1]);

        let option={
            backgroundColor:'#0D1C3D',
            dataset:{source:dataset},
            title:{
                text:province_name+'GDP增长趋势',
                left:'center',
                textStyle:{
                    color:'#CCC',
                    fontSize:10
                }
            },
            grid:{
                left: '16%',
                right:'16%',
                top:'20%',
                bottom:'20%',
            },
            tooltip:{
                show:true,
                trigger:'axis',
                confine:true,
                formatter: function (params) {
                    str = params[0].value[0]+'<br\>';
                    Name = params[0].seriesName;
                    str += (Name+'GDP(亿元)：'+params[0].value[1]+'<br\>');
                    str += (Name+'人均GDP(元)：'+params[0].value[2]);

                    return str;
                }
            },
            xAxis:{
                type:'category',
                splitLine:{show:false},
            },
            yAxis:[
                {
                    type: 'value',
                    splitLine:{show:true,lineStyle:{opacity:0.3}},
                    splitNumber:7,
                },
                {
                    type: 'value',
                    splitNumber:7,
                    splitLine:{show:false},
                }],
            series:[{
                type:'line',
                seriesLayoutBy: 'row',
                itemStyle:{color:'#e18412'},
                emphasis:{itemStyle:{color:'#247ba8'}},
            },{
                type:'line',
                seriesLayoutBy: 'row',
                yAxisIndex: 1,
                itemStyle:{color:'#50bef8'},
                emphasis:{itemStyle:{color:'#247ba8'}},
            }]
            };
            GDP_lines.setOption(option,true);
        }
        function init_migrate() {
            let option={
                backgroundColor:'#0D1C3D',
                dataset:{source:dataSerise['GDP']},
                title:{
                    text:'人口流动特征（2016年）',
                    left:'center',
                    textStyle:{
                        color:'#CCC',
                        fontSize:10
                    }
                },
                grid:{
                    left: '2%',
                    right:'5%',
                    top:'10%',
                    bottom:'10%',
                },
                tooltip: {
                    trigger: 'item'
                },
                series:[{
                    name: '流向区域',
                    type: 'pie',
                    radius: ['25%', '40%'],
                    center:['20%','50%'],
                    itemStyle: {
                        borderRadius: 3,
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: true,
                        fontSize: '10',
                        formatter:function (params) {
                            return params.seriesName;
                        },
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 51.8, name: '东部地区'},
                        {value: 27.55, name: '西部地区'},
                        {value: 13.83, name: '中部地区'},
                        {value: 7.54, name: '东北地区'},
                    ]
        },{
                    name: '受教育程度',
                    type: 'pie',
                    radius: ['25%', '40%'],
                    center:['50%','50%'],
                    itemStyle: {
                        borderRadius: 3,
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: true,
                        fontSize: '10',
                        formatter:function (params) {
                            return params.seriesName;
                        },
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 11.4, name: '小学及以下'},
                        {value: 41.99, name: '初中'},
                        {value: 36.88, name: '高中'},
                        {value: 9.99, name: '大学'},
                    ]
        },{
                    name: '年龄',
                    type: 'pie',
                    radius: ['25%', '40%'],
                    center:['80%','50%'],
                    itemStyle: {
                        borderRadius: 3,
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: true,
                        fontSize: '10',
                        formatter:function (params) {
                            return params.seriesName;
                        },
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 61.57, name: '35岁以下'},
                        {value: 34.31, name: '35岁至45岁'},
                        {value: 4.12, name: '其他'},
                    ]
        }]
            };
            migrate.setOption(option,true);
        }
        function init_increase() {
            let option={
                backgroundColor:'#0D1C3D',
                title:{
                    text:'城市亮度增长排名',
                    left:'center',
                    textStyle:{
                        color:'#CCC',
                        fontSize:10
                    }
                },
                grid:{
                    left: '15%',
                    right:'5%',
                    top:'10%',
                    bottom:'10%',
                },
                tooltip:{show:true,},
                xAxis:{
                    type:'category',
                    splitLine:{show:false},
                },
                yAxis:{type: 'value',splitLine:{show:true,lineStyle:{opacity:0.3}},},
                series:[{
                    type:'bar',
                    itemStyle:{color:'#50bef8'},
                    emphasis:{itemStyle:{color:'#247ba8'}},
                    data:[
                            {name:'香港',value:243.13},
                            {name:'舟山市',value:231.35},
                            {name:'深圳',value:205.97},
                            {name:'厦门',value:198.29},
                            {name:'玉环市',value:198.47},
                            {name:'广州市',value:187.22},
                            {name:'上海',value:178.98},
                            {name:'澳门',value:177.89},
                            {name:'台中',value:177.68},
                            {name:'佛山',value:174.48},
                            {name:'嘉兴',value:171.58},
                            {name:'中山',value:171.13},
                            {name:'武汉',value:169.12},
                            {name:'泰州',value:165.72},
                        ]
                }]
            };
            infrastructure_province.setOption(option,true)
        }
        function init_light() {
            let option={
                backgroundColor:'#0D1C3D',
                dataset:{source:dataSerise['GDP']},
                title:{
                    text:'长三角及珠三角经济发展区亮度值占比',
                    left:'center',
                    textStyle:{
                        color:'#CCC',
                        fontSize:10
                    }
                },
                grid:{
                    left: '2%',
                    right:'5%',
                    top:'10%',
                    bottom:'10%',
                },
                tooltip: {
                    trigger: 'item',
                    confine:true,
                },
                series:[{
                    name: '区域亮度',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center:['50%','50%'],
                    itemStyle: {
                        borderRadius: 3,
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: true,
                        fontSize: '10',
                        formatter:function (params) {
                            return params.seriesName;
                        },
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value:2690.519386,name:'珠三角'},
                        {value:3135.422386,name:'长三角'},
                        {value:14900.4202,name:'全国其他地区'}
                    ]
        }]
            };
            GDP_lines.setOption(option,true);
        }


        MyFunction1();
        init_migrate();
        initChart_population();
        initChart_GDP();

    </script>
    
</body>
</html>